<template>
	<!-- <view>
		商品收藏
	</view> -->
	<view class="box">
		<view class="item" v-for="item in collected" :key="item.id">
			<view class="left">
				<image :src="item.pic" ></image>
			</view>
			<view class="right">
				<view class="title">{{item.detailTitle}}</view>
				<view class="bottom">
					<view>收藏</view>
					<view class="price">${{item.price}}</view>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				collected:[],
			};
		},
		methods:{
			
		},
		onLoad(){
			this.collected=uni.getStorageSync("collectList");
			console.log(this.collected)
		}
	}
</script>

<style lang="scss" scoped>
.box{
	width: 100%;
	height: 100vh;
	background-color:#F1ECE7;
	overflow: hidden;
	.item{
		width: 90%;
		height: 110px;
		margin: 20px auto 0;
		display: flex;
		justify-content: space-between;
		background-color: #fff;
		border-radius: 5px;
		.left{
			width: 25%;
			margin: 10px;
			image{
				width: 100%;
				height: 100%;
			}
		}
		.right{
			width: 65%;
			margin: 20px 20px 20px 0;
			display: flex;
			flex-wrap: wrap;
			align-content: space-between;
			.title{
				width: 100%;
				font-size: 12px;
				color: #494949;
				line-height: 18px;
			}
			.bottom{
				width: 100%;
				display: flex;
				justify-content: space-between;
				font-size: 12px;
				color: #494949;
				line-height: 18px;		
				.price{
					font-weight: bold;
					font-size: 16px;
				}
			}
		}
	}
}
</style>
